<template>
	<view>
		<!-- 自定义导航条 -->
		<!-- <nav-bar></nav-bar> -->
		<view v-if="houseInfo.houseDetail.title" class="page-detail-container">
			<view @click="goVr" class="vr-btn">VR看房</view>
			<view class="house-imgs_wrap">
				<block v-if="houseInfo.houseDetail.houseImg.length">
					<player :swiperList="houseInfo.houseDetail.houseImg"></player>
				</block>
				<view v-else>
					<u--image :showLoading="true" mode="aspectFill" :src="houseInfo.houseDetail.cover" width="100vw"
						@click="click"></u--image>
				</view>
			</view>
			<!-- 房屋信息 -->
			<view class="house-info">
				<view class="title">
					{{ houseInfo.houseDetail.title }}
				</view>
				<view class="rent">
					<text>租金：</text>{{ houseInfo.houseDetail.rent }}<text>元/月</text>
				</view>
				<view class="sub-title">房屋信息</view>
				<view class="info-wrap">
					<view class="info-item">
						<view class="label">户型:</view>
						<view class="con">{{ houseInfo.houseDetail.houseType }}</view>
					</view>
					<view class="info-item">
						<view class="label">支付:</view>
						<view class="con">{{ houseInfo.houseDetail.paymentType }}</view>
					</view>
					<view class="info-item">
						<view class="label">楼层:</view>
						<view class="con">{{ houseInfo.houseDetail.floor }}层</view>
					</view>
					<view class="info-item">
						<view class="label">朝向:</view>
						<view class="con">{{ houseInfo.houseDetail.toward }}</view>
					</view>
					<view class="info-item">
						<view class="label">面积:</view>
						<view class="con">{{ houseInfo.houseDetail.area }}㎡</view>
					</view>
					<view class="info-item">
						<view class="label">电梯:</view>
						<view class="con">{{ houseInfo.houseDetail.elevator }}</view>
					</view>
				</view>
				<button @click="doPay">支付</button>
				<view class="sub-title">家具配置</view>
				<view class="config">
					<view class="tag-wrap" v-for="(item, index) in houseInfo.houseDetail.config" :key="index">
						<uni-tag type="primary" :text="item"></uni-tag>
					</view>
				</view>
				<view class="sub-title">房屋介绍</view>
				<view class="house-desc">
					{{ houseInfo.houseDetail.desc }}
				</view>
				<view class="sub-title">位置及周边信息</view>
				<view class="map">
					<map style="width: 100%; height: 200px" :latitude="houseInfo.houseDetail.lat"
						:longitude="houseInfo.houseDetail.lng" :markers="houseInfo.houseDetail.covers">
					</map>
				</view>
				<view class="other-house"> </view>
				<view class="help-wrap">
					<view class="btn-wrap">
						<view class="btn">
							<u-button width="100" @tap="goReservation" type="warning" size="small"
								:text="houseInfo.houseDetail.isLook ? '已预约':'预约看房'"></u-button>
						</view>
						<view class="btn">
							<!-- <u-button
                width="100"
                open-type="contact"
                bindcontact="handleContact"
                type="success"
                size="small"
                text="联系客服"
              ></u-button> -->
							<u-button width="100"
								@click="goPage(`/pagesB/chat/chat?userId=${houseInfo.houseDetail.userId}&userName=${houseInfo.houseDetail.userName}`, true)"
								type="success" size="small" text="联系客服"></u-button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else>
			<u-loading-page loading-text="loading..."></u-loading-page>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		getCurrentInstance
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	// import navBar from '../../components/nav-bar/nav-bar.vue';
	import player from '../../components/player/player.vue';
	const houseObj = uniCloud.importObject('reservationHouse')
	// const menuInfo = reactive({});
	const houseInfo = reactive({
		_id: '66f4cb524bfcce6fd081554e',
		houseDetail: {
			houseImg: [
				"http://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024"
			],
			isLook: false,
			title: '林江华府 石景山 临近地铁',
			rent: 50000,
			houseType: '四室两厅',
			paymentType: '分期',
			floor: '20',
			toward: '南',
			area: 2000,
			elevator: '有',
			desc: '临近地铁，交通便利，周边商超',
			lat: 39.909,
			lng: 116.39742,
			userId: 'zxy',
			userName: '张学友',
			covers: [{
				latitude: 39.909,
				longitude: 116.39742
			}]
		},
	});
	const {
		proxy
	} = getCurrentInstance();

	const latitude = ref();
	const longitude = ref();
	onLoad((opt) => {
		houseInfo._id = opt.id
		getHouseDetail(opt.id);
		// menuInfo.value = menuButton; // Assuming `menuButton` is defined elsewhere
		// console.log(menuButton, 'aaaaa');
	});

	const goVr = () => {
		uni.navigateTo({
			url: '/pages/vr/vr',
		}); // Replace with your actual navigation logic
	};

	const goReservation = async () => {
		// let obj = JSON.stringify(houseInfo.houseDetail);
		// uni.navigateTo({
		// 	url: `/pages/reservation/reservation?obj=${obj}`,
		// }); // Replace with your actual navigation logic
		if(!houseInfo.houseDetail.isLook) {
			const obj = {houseId: houseInfo._id, userId: '18301638064'}
			const res = await houseObj.addData(obj)
			if(res.id) {
				uni.showToast({
					title:'预约成功'
				})
				houseInfo.houseDetail.isLook = true
			}
		} else {
			const obj = {houseId: houseInfo._id, userId: '18301638064'}
			const res = await houseObj.deleteData(obj)
			if(res) {
				uni.showToast({
					title:'取消成功'
				})
				houseInfo.houseDetail.isLook = false
			}
		}
		
	};
	const goPage = (path, flag) => {
		if (!flag) {
			uni.navigateTo({
				url: path
			})
		} else {
			const token = uni.getStorageSync('token')
			if (!token) {
				uni.navigateTo({
					url: '/pages/Login/Login'
				})
			} else {
				uni.navigateTo({
					url: path
				})
			}
		}

	}
	const handleContact = (res) => {
		console.log(res, 'abcdefg');
	};
	const getHouseDetail = async (id) => {
		// console.log(1222, proxy.$request)
		const res = await uniCloud.callFunction({
			name:'getDetail',
			data:{
				id
			}
		})
		houseInfo.houseDetail = {...houseInfo.houseDetail, ...res.result.result[0]}
		console.log(res)
	};
	const doPay = () => {
		const openid = uni.getStorageSync('openid')
		uni.request({
			url:'https://env-00jxham84tk1.dev-hz.cloudbasefunction.cn/pay',
			method:"POST",
			data:{
				openid,
				id: '1231231231',
				price: '1'
			},
			success(res) {
				console.log(res)
				uni.requestPayment({ // 调用支付api
					provider: 'weixin',
					...res.data.data,
					success() {
						uni.showModal({
							title: '支付成功',
							content: '请和顾问联系执行订单即可!'
						})
					},
					fail() {}
				})
			}
		})
	}
</script>

<style lang="scss">
	.page-detail-container {
		position: relative;

		.vr-btn {
			position: absolute;
			width: 110rpx;
			height: 40rpx;
			line-height: 40rpx;
			right: 0;
			top: 120px;
			z-index: 100;
			color: #fff;
			font-size: 24rpx;
			text-align: center;
			background-color: mediumseagreen;
			border-radius: 20rpx 0 0 20rpx;
		}
	}

	.sub-title {
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
		padding: 30rpx 0;
	}

	.house-info {
		background-color: #fff;
		position: relative;
		left: 0;
		top: -10rpx;
		padding: 30rpx 30rpx 0 30rpx;
		border-radius: 10rpx 10rpx 0 0;

		.title {
			font-size: 38rpx;
			font-weight: bold;
			color: #333;
		}

		.rent {
			padding: 10rpx 0;
			font-size: 38rpx;
			font-weight: bold;
			color: #f60;

			text {
				font-size: 24rpx;
			}
		}

		.info-wrap {
			display: flex;
			flex-wrap: wrap;
			padding: 10rpx 30rpx 0 30rpx;

			.info-item {
				width: 300rpx;
				display: flex;
				margin-bottom: 30rpx;

				.label {
					color: #999;
				}

				.con {
					padding-left: 10rpx;
				}
			}
		}

		.house-desc {
			text-indent: 2em;
			line-height: 50rpx;
		}

		.tag-wrap {
			display: inline-block;
			margin-right: 20rpx;
		}

		.map {
			padding-bottom: 150rpx;
		}
	}

	.btn-wrap {
		width: 750rpx;
		position: fixed;
		background-color: #fff;
		left: 0;
		bottom: 0;
		display: flex;
		padding: 50rpx 0;
		justify-content: space-around;

		.btn {
			width: 300rpx;
		}
	}
</style>